<template>
  <div class="sceditor">
    <Editor v-model="contentValue" :init="init" :disabled="disabled" :placeholder="placeholder" @onClick="onClick" />
  </div>
</template>

<script>
import API from '@/api'
import Editor from '@tinymce/tinymce-vue'
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver'
import 'tinymce/icons/default'
import 'tinymce/models/dom'

// 引入编辑器插件
import 'tinymce/plugins/code' //编辑源码
import 'tinymce/plugins/image' //插入编辑图片
import 'tinymce/plugins/media' //插入视频
import 'tinymce/plugins/link' //超链接
import 'tinymce/plugins/preview' //预览
import 'tinymce/plugins/template' //模板
import 'tinymce/plugins/table' //表格
import 'tinymce/plugins/pagebreak' //分页
import 'tinymce/plugins/lists' //列
import 'tinymce/plugins/advlist' //列
import 'tinymce/plugins/quickbars' //快速工具条

export default {
  components: {
    Editor,
  },
  props: {
    modelValue: {
      type: String,
      default: '',
    },
    placeholder: {
      type: String,
      default: '',
    },
    height: {
      type: Number,
      default: 300,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    plugins: {
      type: [String, Array],
      default: 'code image media link preview table quickbars template pagebreak lists advlist',
    },
    toolbar: {
      type: [String, Array],
      default:
        'undo redo |  forecolor backcolor bold italic underline strikethrough link | blocks fontfamily fontsize | \
					alignleft aligncenter alignright alignjustify | outdent indent | numlist bullist | pagebreak | \
					image media table template preview | code selectall',
    },
    templates: {
      type: Array,
      default: () => [],
    },
    options: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
      init: {
        language_url: 'tinymce/langs/zh_CN.js',
        language: 'zh_CN',
        skin_url: 'tinymce/skins/ui/oxide',
        content_css: 'tinymce/skins/content/default/content.css',
        menubar: false,
        statusbar: true,
        plugins: this.plugins,
        toolbar: this.toolbar,
        toolbar_mode: 'sliding',
        font_size_formats: '12px 14px 16px 18px 22px 24px 36px 72px',
        height: this.height,
        placeholder: this.placeholder,
        branding: false,
        resize: true,
        elementpath: true,
        content_style: '',
        templates: this.templates,
        quickbars_selection_toolbar: 'forecolor backcolor bold italic underline strikethrough link',
        quickbars_image_toolbar: 'alignleft aligncenter alignright',
        quickbars_insert_toolbar: false,
        image_caption: true,
        image_advtab: true,
        convert_urls: false,
        images_upload_handler: function (blobInfo) {
          return new Promise((resolve, reject) => {
            const data = new FormData()
            data.append('file', blobInfo.blob(), blobInfo.filename())
            API.common.upload
              .post(data)
              .then((res) => {
                resolve(res.data.src)
              })
              .catch(() => {
                reject('Image upload failed')
              })
          })
        },
        setup: function (editor) {
          editor.on('init', function () {
            this.getBody().style.fontSize = '14px'
          })
          editor.on('OpenWindow', function (e) {
            //FIX 编辑器在el-drawer中，编辑器的弹框无法获得焦点
            var D = document.querySelector('.el-drawer.open')
            var E = e.target.editorContainer
            if (D && D.contains(E)) {
              var nowDA = document.activeElement
              setTimeout(() => {
                document.activeElement.blur()
                nowDA.focus()
              }, 0)
            }
          })
        },
        ...this.options,
      },
      contentValue: this.modelValue,
    }
  },
  watch: {
    modelValue(val) {
      this.contentValue = val
    },
    contentValue(val) {
      this.$emit('update:modelValue', val)
    },
  },
  mounted() {
    tinymce.init({})
  },
  methods: {
    onClick(e) {
      this.$emit('onClick', e, tinymce)
    },
  },
}
</script>

<style></style>
